import React, { useEffect, useRef } from 'react';
import PDFObject from 'pdfobject';

const PdfViewer = ({ info }) => {
  const pdfViewerRef = useRef(null); // 创建一个 ref 来引用 PDF 查看器

  useEffect(() => {
    // 确保在组件挂载后加载 PDF
    PDFObject.embed(info?.url, pdfViewerRef.current, {
      // 使用 ref.current
      pdfOpenParams: {
        view: 'FitH', // 适应宽度
        toolbar: 0, // 隐藏工具栏
        navpanes: 0, // 隐藏导航窗格
        statusbar: 0, // 隐藏状态栏
      },
    });
  }, [info]); // 依赖于 pdfUrl，当其变化时重新加载 PDF

  return (
    <div style={{ width: '100%', height: '500px', marginTop: '24px' }}>
      <p style={{ fontSize: '16px', fontWeight: 'bold', color: '#1e1e1e' }}>{info?.name}</p>
      <div
        ref={pdfViewerRef} // 使用 ref
        style={{ width: '100%', height: '460px', border: '1px solid #ccc', marginTop: '18px' }}
      />
    </div>
  );
};

export default PdfViewer;

<PdfViewer info={item} />
